<!--  -->
<template>
  <div id="U_jdSupply" :class="className">
    <!-- style -->
    <div v-html="css"></div>
    <ul class="button-box" v-if="categoryList.length > 0">
      <li v-for="(item, index) in categoryList" :key="`${index}-${item.id}`" :class="{ activeCate: cate_id === item.cate_id }" @click="onChangeCate(item.cate_id)">
        <img class="button-img" :src="item.cate_logo || emptyImage" alt="" />
        <p class="button-title margin-top-4">{{ item.cate_name }}</p>
      </li>
    </ul>

    <div>
      <div class="flex-column padding-10 margin-10 bg-fff border-radius-8 t-l" v-for="(item, index) in shopList" :key="`${index}-${item.shop_id}`">
        <div class="flex-a-c">
          <img :src="item.shop_logo || emptyImage" class="wh-40" alt="" />
          <div class="flex-column f-grow-1 margin-left-6 margin-right-6">
            <div class="f-14 f-bold line-clamp-1 color-000000">{{ item.shop_name }}</div>
            <div class="f-12 color-6E6E79">{{ item.cate_name }}</div>
          </div>
          <div class="btn f-12" @click.stop="toUrl('jdSupplyShop', { id: item.shop_id })">
            进入店铺
          </div>
        </div>

        <div class="flex margin-top-10" v-if="item.goods && item.goods.length > 0" style="overflow-x: scroll;">
          <div class="flex-column margin-right-10" @click.stop="toUrl('goods', { id: goods.id })" v-for="(goods, gindex) in item.goods" :key="`${gindex}`" style="flex-shrink: 0;">
            <img :src="goods.thumb || emptyImage" alt="" class="wh-90 border-radius-8" />
            <div class="f-14 line-clamp-1 w-90 margin-top-2">{{ goods.title }}</div>
            <div class="f-13 flex-a-c themeColor">
              <div class="f-10">￥</div>
              {{ goods.price }}
            </div>
          </div>
        </div>
      </div>

      <div v-if="shopList.length == 0" class="flex-column align-center justify-center padding-20">
        <van-empty image="search" :description="isLoading?  '加载中...' : '暂无数据'" />
      </div>
    </div>

      <div
        style="width: 100%; height: 2.5rem; line-height: 2.5rem; text-align: center;"
        v-if="isLoadMore"
        @click="getMoreData"
      >{{ $i18n.t("加载更多") }}</div>
      <div
        style="width: 100%; height: 2.5rem; line-height: 2.5rem; text-align: center;"
        v-if="lastIndex == index && allLoaded"
      >{{ $i18n.t("没有更多了") }}~</div>
  </div>
</template>

<script>
import emptyImage from "@/assets/images/new_diy/image.png";

// 自定义样式
const css = function() {
  const { padding_top, padding_bottom, button_size, border_radius, preview_color, font_size, text_style, font_color, active_cate_color } = this.datas;

  return `
        .component-${this.id} .button-box{
            padding: ${padding_top}px 0 ${padding_bottom}px 0;
            background-color: ${preview_color.color || "#f8f8f8"};
            background-image: url(${preview_color.isColor == 2 ? preview_color.image : ""});
            background-size: 100% 100%;
            background-position: center;
            background-repeat: no-repeat;
        }

        .component-${this.id} .button-box li{
            width: 20%;
        }

        .component-${this.id}  .button-img{
            width: ${button_size}px;
            height: ${button_size}px;
            border-radius: ${border_radius}px;
        }

        .component-${this.id} .button-title{
            font-size:${font_size}px;
            font-weight: ${text_style.includes("1") ? "bold" : ""};
            font-style: ${text_style.includes("2") ? "italic" : ""};
            color: ${font_color};
        }

        .component-${this.id} .button-box li.activeCate .button-title{
            color: ${active_cate_color};
        }
    `;
};
export default {
  props: ["id", "datas", "tabcontrol", "lastIndex", "index", "plugin_active", "isBottom"],
  data() {
    return {
      isLoading: false,
      emptyImage,
      cate_id: 0,
      categoryList: [],
      shop_ids: [],
      shopList: []
    };
  },

  created() {
    this.initData();
    this.init();
  },

  watch: {
    isBottom: function(nval, oval) {
      if (nval) {
        if (this.lastIndex == this.index) {
          this.getMoreData();
        }
      }
    }
  },

  components: {},

  computed: {
    css() {
      return "<style>" + css.call(this) + "</style>";
    },
    className() {
      const name = ["component-wrapper", `component-${this.id}`];
      return name;
    }
  },

  mounted() {},

  methods: {
    initData() {
      this.page = 1;
      this.total_page = 0;
      this.isLoadMore = true;
      this.allLoaded = false;
    },
    toUrl(name, params = {}, query = {}) {
      if (!name) return;
      this.$router.push(this.fun.getUrl(name, params, query));
    },
    init() {
      console.log("jdSupply init", this.datas);
      this.get_type = Number(this.datas.get_style) === 1 ? 0 : 1;
      if (this.get_type === 0) {
        //自动获取
        this.getCategory();
      } else {
        // 手动获取
        this.shop_ids = this.datas.list.map(item => item.shop_id);
        console.log("shop_ids", this.shop_ids);
        this.getCategory();
      }
    },
    async getCategory() {
      if(!this.datas.is_category) {
        // 不显示分类
        this.initShopList();
        return;
      }
      let { result, msg, data } = await $http.post(
        "plugin.jd-supply.frontend.shop.decorate.get-category",
        {
          get_type: this.get_type,
          shop_ids: this.shop_ids || 0
        },
        "."
      );
      if (result == 0) return this.$toast(msg);
      if (this.datas.is_allShop) {
        // 添加全部商品分类
        data.unshift({
          cate_id: 0,
          cate_name: "全部",
          cate_logo: this.datas.allCate_image || emptyImage
        });
      }
      this.categoryList = data || [];
      this.cate_id = this.categoryList[0].cate_id || 0;
      this.initShopList();
    },
    initShopList() {
      this.shopList = [];
      this.total_page = 1;
      this.getShopList();
    },
    async getShopList() {
      this.isLoading = true;
      let { result, msg, data } = await $http.post(
        "plugin.jd-supply.frontend.shop.decorate.get-shop",
        {
          get_type: this.get_type,
          cate_id: this.cate_id,
          is_goods: this.datas.is_goods || 0,
          shop_ids: this.shop_ids || 0,
          page: 1
        },
        "."
      );
      this.isLoading = false;
      if (result == 0) return this.$toast(msg);

      this.total_page = data.list.last_page || 1;
      if (data.list.last_page == data.list.current_page) {
        this.isLoadMore = false;
        this.allLoaded = true;
      }
      if (data.list.data.length > this.datas.get_number && this.get_type == 1) {
        data.list.data.splice(this.datas.get_number, data.list.data.length - this.datas.get_number);
        this.isLoadMore = false;
        this.allLoaded = true;
      }
      this.shopList = data.list.data || [];
    },
    onChangeCate(cate_id) {
      this.cate_id = cate_id;
      this.initShopList();
    },

    async getMoreData() {
      this.isLoadMore = false; // 防止多次请求分页数据
      if (this.page >= this.total_page || this.shopList.length > this.datas.get_number) {
        console.log("getMoreData", this.total_page);
      } else {
        this.page = this.page + 1;
        let { result, msg, data } = await $http.post(
          "plugin.jd-supply.frontend.shop.decorate.get-shop",
          {
            get_type: this.get_type,
            cate_id: this.cate_id,
            is_goods: this.datas.is_goods || 0,
            shop_ids: this.shop_ids || 0,
            page: this.page
          },
          "."
        );
        if (result == 1) {
          this.total_page = data.list.last_page;
          if (this.page < this.total_page) {
            this.isLoadMore = true;
          } else {
            this.allLoaded = true;
          }

          this.shopList = this.shopList.concat(data.list.data);
          if (this.shopList.length > this.datas.get_number && this.get_type == 1) {
            this.shopList.splice(this.datas.get_number, this.shopList.length - this.datas.get_number);
            this.isLoadMore = false;
            this.allLoaded = true;
          }
          this.$emit("setLoadMore", this.isLoadMore);
        } else {
          this.$toast(msg);
          this.page = this.page - 1;
          this.isLoadMore = false;
          this.allLoaded = true;
          return;
        }
      }
    }
  }
};
</script>
<style lang="scss" rel="stylesheet/scss" scoped>
.wh-40 {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 50%;
  overflow: hidden;
}
.w-90 {
  width: 5.625rem;
}
.wh-90 {
  width: 5.625rem;
  height: 5.625rem;
  object-fit: cover;
  display: block;
  margin: 0;
}
.btn {
  width: 4.375rem;
  height: 1.5rem;
  line-height: 1.5rem;
  background: var(--themeBaseColor);
  border-radius: 0.875rem;
  font-size: 0.8125rem;
  color: #ffffff;
  text-align: center;
}
// 默认
.component-wrapper {
  width: 100%;

  .button-box {
    display: flex;
    flex-wrap: wrap;
    margin: 0.625rem 0.75rem;
    border-radius: 8px;

    li {
      position: relative;
      margin: 0.625rem 0;
      list-style: none;
      display: flex;
      flex-direction: column;
      align-self: flex-start;
      justify-self: center;
    }

    .button-img {
      margin: 0 auto;
    }

    .button-title {
      text-align: center;
      margin: 0;
    }
  }
}
</style>
